<template>
   <ul class="list">
        <li v-for="(l,i) in films" :key="i"  class="litem" >
            <router-link class="alink" :to="{name:'film',params:{filmId:l.filmId}}">
                <img v-lazy="l.poster" alt="" class="left-img">
                <div class="rightbox">
                    <h2 class="title">
                       <span class="name">
                         {{l.name}}
                       </span>
                       <span class="item">{{l.item.name}}</span>
                    </h2>
                    <p class="pt info-col">
                        <span class="label">
                          观众评分 
                        </span>
                        <span class="grade">
                          {{l.grade}}
                        </span>
                    </p>
                    <p class="pt info-col actors">
                        主演 
                        <span class="label" v-for="(a,j) in l.actors" :key="j">
                            {{a.name}}
                        </span>
                    </p>
                    <p  class="pt info-col">
                       <span class="label">
                          {{l.nation}} | {{l.runtime}} 分钟
                       </span>
                    </p>
                </div>
            </router-link>
            <van-button class="buybtn" v-if="type==1" @click.stop="buyticket(l)">购票</van-button>
            <van-button class="buybtn yueye" v-if="type==2" @click.stop="yuyueticket(l)">预约</van-button>
        </li>
   </ul>
</template>

<script>
export default {
  props:[
    "films",
    "type"
  ],
  methods:{
    buyticket(item){
      console.log(item)
      this.$router.push({name:'buy',params:{filmId:item.filmId}})
    },
    yuyueticket(item){
      this.$router.push({name:'buy',params:{filmId:item.filmId}})
    }
  }
}
</script>


<style lang="scss" scoped>
.actors{
  width:220px !important;
}
.yueye{
  color:#ffb232 !important;
  border: 1px solid #ffb232  !important;
}
.info-col{
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    font-size: 13px;
    margin-top: 4px;
    color: #797d82;
    .label{
      font-size: 13px;
      // margin-top: 4px;
      color: #797d82;
    }
}
.list{
  padding:12px  0   0 0;
  .litem{
    padding:10px;
    margin-top:0px;
    width:100%;
    position: relative;
    height:130px;
    .buybtn{
      position: absolute;
      line-height: 25px;
      height: 25px;
      width: 56px;
      color: #ff5f16;
      font-size: 11px;
      text-align: center;
      border-radius: 2px;
      right:10px;
      top:50%;
      transform: translateY(-80%);
    }
    .alink{
      width:100%;
      height:100%;
      display: flex;
      border-bottom:0.5px solid #b5b5b5;
      .left-img{
        width:68px;
        height:95px;
        margin-right:10px;
        flex-shrink: 0;
      }
      .rightbox{
        flex:1;
        padding:6px 6px;
        .title{
          overflow: hidden;
          -o-text-overflow: ellipsis;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 100%;
          .name{
                max-width: calc(100% - 25px);
                color: #191a1b;
                font-size: 16px;
                height: 22px;
                line-height: 22px;
                margin-right: 5px;
                overflow: hidden;
                -o-text-overflow: ellipsis;
                text-overflow: ellipsis;
                white-space: nowrap;
          }
          .item{
              font-size: 9px;
              color: #fff;
              background-color: #d2d6dc;
              height: 14px;
              line-height: 14px;
              padding: 0 2px;
              border-radius: 2px;
          }
        }
      }
    }
  }
}
</style>
